<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // computed： 是计算属性，依赖其它属性值，派生出新的状态，可以实现双向绑定，并且 computed 的值有缓存，只有它依赖的属性值发生改变，
    // 下一次获取 computed 的值时才会重新计算 computed 的值,不然会获取缓存值,节约性能；
    // watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作



    // 核心区别对比
    //     特性	    computed	            watch
    //     定义方式	必须返回一个值	               不需要返回值
    //     缓存机制	有缓存，依赖不变不重新计算	    无缓存，每次变化都执行
    //     异步操作	不支持	支持
    //     触发时机	依赖变化时自动计算	            监听特定数据变化时触发
    //     使用场景	模板中使用的派生数据	        数据变化时需要执行副作用操作

</script>
</html>